import '../../styles.css'

import styles from './index.module.css'
import success from '../../../public/quiz_success.png'
import redpacket from '../../../public/big_redpacket.png'
import share from '../../../public/share.png'
import red_packet from '../../../public/share/red_packet.png'
import Image from "next/image";
import Modal from 'react-modal'
import React, {useEffect, useState} from "react";
import {useRouter} from "next/router";
import {audioDetail, queryUserInfo, receiveRedPacket, wxSign} from "@/service/api";
import {getDomain} from "@/utils";

declare var wx: any;

Modal.setAppElement('#__next'); // 防止屏幕阅读器读取背景内容
export default function QuestionResult() {
    const [showModal, setShowModal] = useState(false);
    const router = useRouter();
    const [audio, setAudio] = useState<any>({})
    const [redPacketAmount, setRedPacketAmount] = useState(0)

    useEffect(() => {
        if (router.isReady) {
            const audioId = router.query.audioId
            const wxUid = router.query.wxUid
            const params: API.AudioDetailParams = {
                audioId: audioId as string,
                wxGid: null,
                wxUid: wxUid as string,
            }
            audioDetail(params).then(res => {
                console.log('audio detail', res)
                if (res.code === 1) {
                    setAudio(res.data)
                    //如果已经领取过红包，则不能答题，只能收听音频
                    if (res.data.quizStatus === 3) {
                        alert('已经领取过红包，不能重复领取')
                        window.location.href = '/audio?audioId=' + audioId + '&wxUid=' + wxUid
                        return
                    }
                } else {
                    alert('获取音频详情失败,' + res.msg)
                }
            })
        }
    }, [router.isReady]);

    useEffect(() => {
        const script = document.createElement('script');
        script.src = "https://res.wx.qq.com/open/js/jweixin-1.6.0.js";
        script.onload = () => {
            console.log("微信JS-SDK加载完成")
            wxSign(window.location.href).then(res => {
                console.log('wx sign', res)
                wx.config({
                    // debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                    appId: res.data.appId, // 必填，公众号的唯一标识
                    timestamp: res.data.timestamp, // 必填，生成签名的时间戳
                    nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
                    signature: res.data.signature,// 必填，签名
                    jsApiList: [
                        'scanQRCode',
                        'checkJsApi',
                        'onMenuShareQQ',
                        'onMenuShareWeibo',
                        'onMenuShareQZone',
                        'getLocation',
                        'navigateToWeChat',
                        'navigateTo',
                        'onMenuShareAppMessage',
                        'onMenuShareTimeline',
                        'updateAppMessageShareData',
                        'updateTimelineShareData',
                    ] // 必填，需要使用的JS接口列表
                });
            })

            wx.ready(function () {
                // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
                queryUserInfo().then(res => {
                    if (res.code !== 1) {
                        alert('获取用户信息失败,' + res.msg)
                        return
                    }

                    const share_url = getDomain() + '/audio?audioId=' + audio.id + '&wxUid=' + router.query.wxUid + '&inviteId=' + res.data.unionid
                    wx.updateAppMessageShareData({
                        title: audio.name, // 分享标题
                        desc: '百余期奖励等您来领|' + router.query.wxUid, // 分享描述
                        link: share_url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                        imgUrl: getDomain() + '/share/red_packet.png',// 分享图标
                        success: function () {
                            // 设置成功
                        }
                    })
                    wx.updateTimelineShareData({
                        title: audio.name, // 分享标题
                        link: share_url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                        imgUrl: `${red_packet}`, // 分享图标
                        success: function () {
                            // 设置成功
                        }
                    })
                })
            });
            wx.error(function (res: any) {
                // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
            });
        };
        document.body.appendChild(script);

        return () => {
            document.body.removeChild(script);
        };
    }, [audio]);

    function handleReceiveRedPacket() {
        const audioId = router.query.audioId
        console.log('receive red packet', audioId)

        receiveRedPacket({audioId: audioId as string}).then(res => {
            if (res.code === 1) {
                console.log('receive red packet success', res)
                setRedPacketAmount(res.data)
                setShowModal(true)
            } else {
                console.error('receive red packet failed', res)
                alert('红包领取失败，' + res.msg)
            }
        })
    }

    return (
        <>
            <div className={styles.success}>
                <div>
                    <Image className={styles.success_img} src={success} alt={'成功'}/>
                    <div className={styles.success_main_title}>
                        恭喜全部答对
                    </div>
                    <div className={styles.success_sub_title}>
                        点击下面红包领取奖励吧！
                    </div>
                </div>
                <div>
                    <Image onClick={() => {
                        handleReceiveRedPacket()
                    }} className={styles.bigredpacket} src={redpacket} alt={'红包'}/>
                </div>
            </div>
            <Modal
                className={styles.share}
                isOpen={showModal}
                onRequestClose={() => setShowModal(false)}
                contentLabel=""
            >
                <Image className={styles.share_title} src={share} alt={'分享'}/>
                <div className={styles.share_redpacket}>
                    <div className={styles.share_content_title}>恭喜您</div>
                    <div className={styles.share_content_sub_title}>获得<span className={styles.share_number}>{redPacketAmount}</span>元红包
                    </div>
                    <div className={styles.share_content}>红包已自动转账到微信钱包内 如网络延迟、高峰会延迟到账，
                        属于正常现象，请耐心等待
                    </div>
                    {/*<div className={styles.share_content}>恭喜全部答对!请等候咨询老师发放红包奖励!*/}
                    {/*</div>*/}
                </div>
            </Modal>
        </>
    )
}
